<template>
	<view class='cont'>
		<div class="normal-login-container">
			<view class="logo-content align-center justify-center flex">
				<text class="title">{{title}}</text>
			</view>
			<view class="login-form-content">
				<view class="input-item flex align-center">
					<view class="iconfont icon-user icon"></view>
					<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
				</view>
				<view class="input-item flex align-center">
					<view class="iconfont icon-password icon"></view>
					<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码"
						maxlength="20" />
				</view>
				<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
					<view class="iconfont icon-code icon"></view>
					<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
					<view class="login-code">
						<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
					</view>
				</view>
				<div class="checkDiv">
					<u-checkbox-group v-model="checkboxVal" placement="column">
						<u-checkbox label="记住密码" name='1' key='1' activeColor="#0275a1">
						</u-checkbox>
					</u-checkbox-group>
				</div>
				<view class="loginBtn">
					<u-button type='primary' text="登录" @click="handleLogin" throttleTime='1000'></u-button>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	import {
		getCodeImg
	} from '@/api/login'

	export default {
		data() {
			return {
				title: "ERP",
				checkboxVal: ["1"],
				codeUrl: "",
				captchaEnabled: true,
				tabIndex: 0,
				tabList: ['检测机构', '监管部门', '检测协会'],
				loginForm: {
					loginPlatform: 'app',
					username: "",
					password: "",
					code: "",
					uuid: ''
				}
			}
		},
		created() {
			this.getCode()
			if (uni.getStorageSync('detection-remember')) {
				this.loginForm.username = uni.getStorageSync('detection-username')
				this.loginForm.password = uni.getStorageSync('detection-password')
			}
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index;
			},
			// 获取图形验证码
			getCode() {
				getCodeImg().then(res => {
					let data=res.data
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + data.img
						this.loginForm.uuid = data.uuid
					}
				})
			},
			// 登录方法
			async handleLogin() {
				if (this.loginForm.username === "") {
					uni.showToast({
						icon: 'none',
						title: '请输入您的账号'
					})
				} else if (this.loginForm.password === "") {
					this.$modal.msgError("请输入您的密码")
					uni.showToast({
						icon: 'none',
						title: '请输入您的密码'
					})
				} else if (this.loginForm.code === "" && this.captchaEnabled) {
					this.$modal.msgError("请输入验证码")
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
				} else {
					this.$modal.loading("登录中...")
					this.pwdLogin()
				}
			},
			// 密码登录
			async pwdLogin() {
				this.$store.dispatch('Login', this.loginForm).then((deptId) => {
					if (this.checkboxVal && this.checkboxVal.length) {
						uni.setStorageSync('detection-username', this.loginForm.username);
						uni.setStorageSync('detection-password', this.loginForm.password);
						uni.setStorageSync('detection-remember', 1);
					} else {
						uni.setStorageSync('detection-username', null);
						uni.setStorageSync('detection-password', null);
						uni.setStorageSync('detection-remember', 0);
					}
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {
					if (this.captchaEnabled) {
						this.getCode()
					}
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				this.$store.dispatch('GetInfo').then(res => {
					uni.reLaunch({
						url: '/pages/index'
					})
				})

			}
		}
	}
</script>

<style lang="scss">
	.cont {
		height: 100vh;
		background: linear-gradient(to bottom, #0275a1, #012e586e);
	}

	.checkDiv {
		margin-top: 15px;
	}

	.logo {
		width: 150px;
		height: 100px;
		position: fixed;
		top: 50px;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.normal-login-container {
		width: 90%;
		background: #fff;
		border-radius: 20px;
		padding: 10px 20px;
		margin: 0 auto;
		position: relative;
		top: 120px;


		.tip {
			color: #666;
			font-size: 13px;
			position: relative;
			top: 5px;
		}

		.logo-content {
			width: 100%;
			text-align: center;

			.title {
				font-size: 20px;
				margin-bottom: 20px
			}
		}

		.login-form-content {
			text-align: center;

			.input-item {
				margin: 10px auto;
				background-color: #f3f4f5;
				height: 40px;
				border-radius: 10px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 10px;
			}

			.xieyi {
				color: #999;
				margin-top: 20px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}
		}

		.loginBtn {
			padding-top: 15px;
		}
	}
</style>